<% 
  var isAdd=isEmpty(id);
  var headContent = {
%>
<style type="text/css">
  /*验证：提示信息样式 begin*/
   .am-alert-danger {
      background-color: transparent;
      border-color: transparent;
      color: red;
    }
    .am-alert {
      margin-bottom: 1em;
      padding: .625em;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="form"  method="POST" class="am-form" action="${base}/package/update" >
  <div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg" onclick="window.history.back(); return false;">选号套餐配置</strong> / <small>选号入网配置信息</small></div>
  </div>
<input type="hidden" class="am-input-sm" name="edit" id="edit" value="${edit}"/>
<input type="hidden" class="am-input-sm" name="id" id="id" value="${id}"/>
<input type="hidden" class="am-input-sm" name="businessId" id="businessId" value="${businessId!''}"/>
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active"><a href="#tab1">选号入网配置信息</a></li>      
    </ul>
    <div class="am-tabs-bd">
      <div class="am-tab-panel am-fade am-in am-active" id="tab1">
          <!--验证表单元素（validate) begin-->
          <!--input begin-->
          <!-- <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              预约类型：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <select data-am-selected   >
                    <option value="2">宽带预约</option>
                  </select> 
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div> -->


            <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                                          <span  style="color: red;">*</span> 业务授权属性
                </div>
                <div class="am-u-sm-6 am-u-md-6 switch-button">
                    <input type="hidden" id="localized" name="localized" value="${localized!0}"/>
                    <input id="_localized" type="checkbox" data-size='xs'
                           data-am-switch data-off-text="统一授权" data-on-text="属地化授权" value="${localized!0}"  <%if(localized!0 == 1){%> checked <%}%> />
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg">
                </div>
            </div>


            <div class="am-g am-form-group am-margin-top" id="localizedCities">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                    <span style="color: red;">*</span>属地化
                </div>
                <div class="am-u-sm-6 am-u-md-6">
                    <input type="checkbox" id="all" value="">全选
                    <ul id="list">
                        <%for(city in cities!){%>
                        <li style="float: left;margin-right: 20px;list-style-type: none;"><label><input type="checkbox" name="city_ids" value="${city.id}"
                            <%for(config in localizedConfig!){if(city.id==config.localized_city_id){%>checked<%}}%>
                            >${city.DisplayName}</label></li>
                        <%}%>
                    </ul>
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
            </div>



          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                          <span  style="color: red;">*</span> 套餐名称：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" data-validation-message="套餐名称不能为空" placeholder="请输入套餐名称" name="name" value="${name!}" maxlength="50" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${packageNameMessages!}</div>
            </div>
          </div>
          
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                              <span  style="color: red;">*</span> 号码类型：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <select data-am-selected  name="type">
                <option value="1" <%if(type! == "1") {%>selected<%}%>>普号和靓号</option>
                <option value="2" <%if(type! == "2") {%>selected<%}%>>普号</option>
                <option value="3" <%if(type! == "3") {%>selected<%}%>>靓号</option>
                <%if(isShow! == "1"){%>
                    <option value="4" <%if(type! == "4") {%>selected<%}%>>营销活动选号入网</option>
                <%}%>
                  <option value="5" <%if(type! == "5") {%>selected<%}%>>物联网</option>
              </select> 
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                           <span  style="color: red;">*</span> 资费代码：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input js-pattern-code" data-validation-message="资费代码不能为空, 应为数字或字母" placeholder="请输入资费代码" name="code" value="${code!}" maxlength="50" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${codeMessages!}</div>
            </div>
          </div>
          
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                          <span  style="color: red;">*</span> 资费(元/月)：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input js-pattern-sort" data-validation-message="不能为空，资费应为最多两位小数价格数字" name="charge" value="${charge!''}" maxlength="13" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${chargeMessages!}</div>
            </div>
          </div>
          
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                            预存费用(元)：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input js-pattern-sort" data-validation-message="预存费用应为最多两位小数价格数字" name="predeposited" value="${predeposited!''}" maxlength="13" />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${predepositedMessages!}</div>
            </div>
          </div>
           <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                           <span  style="color: red;">*</span> 品牌编码：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input js-pattern-code" data-validation-message="不能为空" name="brand_id" value="${brand_id!''}" maxlength="50" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${predepositedMessages!}</div>
            </div>
          </div>
          
          
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                         特点描述：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" name="desc" value="${desc!}" maxlength="100"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
              <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  排序：
              </div>
              <div class="am-u-sm-6 am-u-md-6">
                  <input class="js-pattern-sort" data-validation-message="排序不能为空且只能是纯数字" type="text" name="sort"
                         placeholder="请输入排序，只能是纯数字，越小越靠前" value="${sort!'1'}" required maxlength="11"/>
              </div>
              <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                  套餐详情：
            </div>
            <div class="am-u-sm-8 am-u-md-10">
              <textarea rows="30" id="container" name="details" style="width:auto;height:400px;" >${details!}</textarea>
                                                  说明：上传图片不能太大,大小在780px*540px左右
            </div>
          </div>

         
          <!--验证表单元素（validate end-->
      </div>
      </div>
  </div>
  <!--选项卡（tabs）end-->
  <div class="am-margin">
    <button type="submit" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.history.back(); return false;">返回上一级</button>
  </div>
</form>
<script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=2"></script>
<script type="text/javascript">
function visible(state) {
    if("1" == state){//展示属地框
        $("#localizedCities").css("display","block");
    }else{
        $("#localizedCities").css("display","none");
    }
}

  $(function(){
    visible($("#localized").val());

        $("#all").click(function(){
            if(this.checked){
                $("#list :checkbox").prop("checked", true);
            }else{
                $("#list :checkbox").prop("checked", false);
            }
        });

      $("#_localized").on({
          'switchChange.bootstrapSwitch': function(event, state) {
              var val = state?"1":"0";
              $("#localized").val(val);
              visible(val);
          }
      });

    /*富文本编辑器：ueditor begin*/
    var ue = UE.getEditor('container');
    /*富文本编辑器：ueditor end*/
    /*表单验证：begin*/
    if ($.AMUI && $.AMUI.validator) {
      //自定义规则，用法：验证元素上加class="js-pattern-sort"
      $.AMUI.validator.patterns.sort = /^\d{1,10}\.{0,1}(\d{1,2})?$/;
    //自定义规则，用法：验证元素上加class="js-pattern-code"
      $.AMUI.validator.patterns.code = /^[0-9a-zA-Z]*$/;/*/^([0-9]+)$/;*/
    }
    /*是否启用switch开关 begin*/
    $("#enabled").on({
      "switchChange.bootstrapSwitch": function(event, state) {
        var $enabled = $("input[name='enabled']");
        if(state) {
          $enabled.val(1);
        }else{
          $enabled.val(0);
        }
        //console.log($enabled.val());
      }
    });
    $("#form").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      },
      submit: function () {
            if($("input[name='city_ids']:checked").length == 0 && "1" == $("#localized").val()){
                alert("至少选择一个地市");
                return false;
            }
      }

    }); 
    /*表单验证：end*/
  });
</script>
<%}%>